
<template>

    <div>
        
        <div style="margin-bottom: 20px;"><strong>管理员管理/</strong>角色管理</div>
        <div>
            
        </div>
        <div class="tableBox" style="margin-top:3%">
            <el-row>
                <!-- 主体表格部分 -->
                <template>
                    <el-table
                    :data="roleTable"
                    border
                    fit
                    style="width: 100%">
                     <el-table-column align="center"
                        type="selection"
                        width="55">
                    </el-table-column>
                    <el-table-column align="center"
                        prop="name"
                        label="序号" 
                        type="index"
                        width="120">
                    </el-table-column>
                    <el-table-column align="center"
                        prop="role_supper_admin"
                        label="角色名">
                    </el-table-column>
                    <el-table-column align="center"
                        prop="role_encoding"
                        label="角色编码">
                    </el-table-column>
                    <el-table-column align="center"
                        prop="role_describe"
                        label="描述">
                    </el-table-column>
                    <el-table-column align="center" 
                        prop="role_state"
                        label="状态">
                        <!-- template slot-scope="scope" scope.row这三个属性可以获取当前表格的一整行数据-->
                        <template slot-scope="scope" >
                            <!-- {{scope.row.admin_state===0?'启用':'停用'}} -->
                            <span v-if="scope.row.role_state===1" style="color:red;font-weight: 500;
        font-size: 14px;">停用</span>
                            <span v-if="scope.row.role_state===0" style="color:green;font-weight: 500;
        font-size: 14px;">启用</span>
                        </template>
                    </el-table-column>
                  
                    </el-table>
                </template>
            </el-row>
            <!-- 修改框 -->
            <div style="display: flex; margin-top: 20px; height: 100px;">
                <transition name="el-zoom-in-center">
                    <div v-show="show2" class="transition-box">
                            <el-form :model="roleForm" :rules="rules"  label-width="100px" class="demo-ruleForm">
                                <div class="nameBox">
                                    <el-form-item label="角色名称" prop="name">
                                        <el-input v-model="roleForm.role_supper_admin" style="width:200px"></el-input>
                                    </el-form-item>
                                </div>
                                <el-form-item label="角色描述" prop="address">
                                    <el-input v-model="roleForm.role_describe" type="textarea"></el-input>
                                </el-form-item>
            
                                <el-form-item>
                                    <el-button type="primary" @click="submitForm('roleForm')">修改</el-button>
                                    <el-button @click="resetForm('roleForm')">取消</el-button>
                                </el-form-item>
                            </el-form>
                    </div>
                </transition>
            </div>
             <!-- 添加用户模态框 -->
            <div>
                <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="60%">
                    <el-form :model="addRoleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" label-suffix=":">
                        <el-form-item label="角色名称" prop="name">
                            <el-input v-model="addRoleForm.role_supper_admin"></el-input>
                        </el-form-item>
                        <el-form-item label="角色编码" prop="name">
                            <el-input v-model="addRoleForm.role_encoding"></el-input>
                        </el-form-item>
                        <el-form-item label="角色描述" prop="name">
                            <el-input v-model="addRoleForm.role_describe" type="textarea"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible">取 消</el-button>
                        <el-button type="primary" @click="insertAdmin">确 定</el-button>
                    </span>
                </el-dialog>

            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    
     data() {
        return {
          roleTable:[],
          show2: false ,
          roleForm:{
                role_supper_admin:'',
                role_describe:''
          },
          addRoleForm:{
                role_supper_admin:'',
                role_encoding:'',
                role_describe:''
          },
          rules: {
                role_supper_admin: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                role_describe: [
                    { required: true, message: '请填写活动形式', trigger: 'blur' }
                ],
                roleName:[
                    {redirect: true,message:"请输入角色名",trigger: 'blur'}
                ]
            },
        dialogVisible:false
        }
        
      },
        methods: {
        indexMethod(index) {
            return index * 1;
      },
      handle(index, row,index1){
          console.log(index,row);
          if(index1===0){
              this.show2=true;
          }else if(index1===1){
              
          }else if(index1===2){
              axios.get("/api/Authority/findAllAuthority")
              .then(r=>{
                  console.log(r);
              })
          }
      },
      resetForm(){
          this.show2=false;
      },
      addRole(){
        this.dialogVisible=true;
      },
      insertAdmin(){
          axios.post('/api/Role/AddRole',this.addRoleForm)
          .then(r=>{
            
          })
          this.addRoleForm
    }
      
    },
    mounted() {
        axios.get("/api/Role/findListRole")
        .then((r)=>{
            console.log(r);
            
            this.roleTable=r.data.data;
        });
    },
}
</script>

<style  scoped>
    .transition-box {
        margin-bottom: 10px;
        width: 84%;
        height: 100%;
        border-radius: 4px;
        background-color:white;
        text-align: center;
        color: #fff;
        padding: 40px 20px;
        box-sizing: border-box;
        margin-right: 20px;
        position:absolute;
        top: 20%;
        z-index: 100;
        
    }
    .nameBox{
        width: 20%;
    }
</style>